<template>
  <div>
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" size="small" label-width="120px">
      <el-form-item label="选择省份：" prop="province">
        <el-select class="el_select" v-model="addForm.province" @change="changeProvince">
          <el-option v-for="(item,index) in provinceList" :key="`p_${index}`" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择城市：" prop="city">
        <el-select v-model="addForm.city" @change="changeCity">
          <el-option v-for="(item,index) in cityList" :key="`c_${index}`" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作产品：" prop="productId">
        <el-select v-model="addForm.productId" @change="changeProduct">
          <el-option v-for="(item,index) in productList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作公司：" prop="orgId">
        <el-select v-model="addForm.orgId" filterable placeholder="请选择">
          <el-option v-for="item in orgList" :key="item.orgId" :label="item.name" :value="item.orgId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="aloading" @click="saveInfo()">保存</el-button>
        <el-button type="default" @click="closeDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { GET_ALL_CITYS, GET_ALL_PRODUCT } from "@/http/public";
import {
  ALLOT_THIRDPARTY_CUSTOMER_INFO,
  GET_THIRDPARTY_ALLPAGE,
} from "@/http/customer";
import { deepClone, showToast } from "@/utils/util";
export default {
  name: "AllotStaff",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      addForm: {},
      provinceList: [],
      cityList: [],
      productList: [],
      orgList: [],
      addFormRules: {
        shopId: [{ required: true, message: "请选择门店", trigger: "change" }],
        teamId: [{ required: true, message: "请选择团队", trigger: "change" }],
        employeeId: [
          { required: true, message: "请选择员工", trigger: "change" },
        ],
      },
      aloading: false,
    };
  },
  mounted() {
    this.getCity();
    this.getProduct();
  },
  methods: {
    // 获取所有城市
    getCity() {
      GET_ALL_CITYS().then((res) => {
        let obj = res.data || {};
        let list = obj.childList || [];
        this.provinceList = list;
      });
    },

    // 获取所有产品
    getProduct() {
      GET_ALL_PRODUCT().then((res) => {
        this.productList = res.data || [];
      });
    },

    // 切换省份
    changeProvince(e) {
      let list = this.provinceList;
      let o = list.find((k) => k.id == e);
      if (o) {
        this.cityList = o.childList;
      }
      if (this.addForm.city) {
        delete this.addForm.city;
      }
    },

    // 切换城市
    changeCity() {
      this.getCompany();
    },

    // 切换产品
    changeProduct() {
      this.getCompany();
    },

    // 分配客户
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.addForm);
        let arr = [];
        _this.list.map((k) => {
          arr.push(k.id);
        });
        oParams.customerIdList = arr;
        delete oParams.province;
        _this.aloading = true;
        ALLOT_THIRDPARTY_CUSTOMER_INFO(oParams).then((res) => {
          _this.aloading = false;
          if (res.code == 200) {
            showToast({
              message: "分配成功",
              type: "success",
            });
            this.$emit("change", true);
          }
        });
      });
    },

    // 关闭弹框
    closeDialog() {
      this.$emit("change");
    },

    // 获取所有合作公司
    getCompany() {
      let oParams = {};
      oParams.city = this.addForm.city;
      oParams.productId = this.addForm.productId;

      if(this.addForm.orgId){
        delete this.addForm.orgId
      }

      GET_THIRDPARTY_ALLPAGE(oParams).then((res) => {
        this.orgList = res.data || []
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el_select {
  margin-right: 10px;
}
</style>